import React                    from 'react';
import {connect}                from "react-redux";

import Shop                     from '../../components/icon/Shop';
import Record                   from '../../components/icon/Record';
import CartIcon                 from '../../components/icon/Cart';
import Nav, {subRoutes}         from "../../config/Navigator";
import {loadItem}               from "../../actions/cart";
import {BottomNav, Button}      from '../../components/nav/BottomNav';
import './cart.scss';

class Cart extends React.Component {

    componentWillMount(){
        document.title = '兑换商城';
    }

    render(){
        var {total = '0'} = this.props.item;
        return (
            <div className="cart">
                <div className="cart-c">{subRoutes(this.props.routes)}</div>
                <BottomNav>
                    <Button label="兑换商城" to={Nav.cartList()} icon={<Shop />}/>
                    <Button label={<Badge count={total}>购物车</Badge>} to={Nav.cartItem()} icon={<CartIcon />}/>
                    <Button label="兑换记录" to={Nav.records()} icon={<Record />}/>
                </BottomNav>
            </div>
        );
    }

}

const Badge = ({count, children}) => (
    <div className="badge" id="badge">
        {children}
        {count !== '0' && <div className="b-count flex-avg">{count}</div>}
    </div>
);

export default connect(({cart: {item}}) => ({item}), {loadItem})(Cart);
